<template>
  <div>
    <div class="header-box">
      <div class="left-time">
        <van-icon name="clock-o" size="18" color="#666666" style="vertical-align: -10%"/>
        <span>{{ `${min}: ${sec}` }}</span>
      </div>
      <div>立即交卷</div>
    </div>
    <div class="qs-box">
        <div v-for="(item,index) in list" :key="index">
            <p>{{index+1}}.{{item.title}}</p>
            <p v-for="(value, key, index) in item.children" :key="index">{{key}}.{{value}}</p>
        </div>
    </div>
    <home-components></home-components>
  </div>
</template>
<script>
import { Icon } from "vant";
import homeComponents from '../../components/homeComponents/index'
export default {
  components: {
    [Icon.name]: Icon,
    homeComponents
  },
  data() {
    return {
      time: "",
      min: 20,
      sec: 0,
      list:[
          {title:'下面不是感冒的常见症状？',children:{a:"流鼻涕", b:'发烧', c:'发烧',d:'胃痛'}},
          {title:'下面不是感冒的常见症状？' ,children:{a:"流鼻涕", b:'发烧', c:'发烧',d:'胃痛'}},
          {title:'下面不是感冒的常见症状？' ,children:{a:"流鼻涕", b:'发烧', c:'发烧',d:'胃痛'}},
          {title:'下面不是感冒的常见症状？' ,children:{a:"流鼻涕", b:'发烧', c:'发烧',d:'胃痛'}},
          {title:'下面不是感冒的常见症状？' ,children:{a:"流鼻涕", b:'发烧', c:'发烧',d:'胃痛'}},
          {title:'下面不是感冒的常见症状？' ,children:{a:"流鼻涕", b:'发烧', c:'发烧',d:'胃痛'}},
          {title:'下面不是感冒的常见症状？' ,children:{a:"流鼻涕", b:'发烧', c:'发烧',d:'胃痛'}},
          {title:'下面不是感冒的常见症状？' ,children:{a:"流鼻涕", b:'发烧', c:'发烧',d:'胃痛'}}
      ]
    };
  },
  mounted() {
    this.time = Date.parse(new Date()) + 0.05 * 60 * 60 * 1000;
    // 开始执行倒计时
    this.countdown();
  },
  methods: {
    countdown() {
      const end = this.time; // 定义结束时间
      const now = Date.parse(new Date()); // 获取本地时间
      const msec = end - now; // 定义总共所需的时间
      // 将时间戳进行格式化
      let min = parseInt((msec / 1000 / 60) % 60);
      let sec = parseInt((msec / 1000) % 60);
      // 倒计时结束时的操作
      const that = this;
      if (this.min == 0 && this.sec == 0) {
        console.log("时间已经结束，答题完毕");
        this.$toast("时间已经结束，答题完毕");
        this.min = 20;
        this.sec = 0;
      } else {
        // 如时间未归零则继续在一秒后执行
        this.min = min > 9 ? min : "0" + min;
        this.sec = sec > 9 ? sec : "0" + sec;
        setTimeout(that.countdown, 1000);
      }
    }
  }
};
</script>
<style lang="less" scoped>
.header-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    background-color: #c9e4ff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0 12px ;
    z-index: 10;
}
.qs-box{
    margin-top: 50px;
    padding: 0 12px;
}
</style>